<template>
  <div class="time">
    <div> {{ timeInfo.dateYear }}</div>
    <div> {{ timeInfo.dateDay }}</div>
    <div> {{ timeInfo.dateWeek }}</div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onUnmounted, reactive } from 'vue'

import { formatTime } from '../utils/getDate'

const WEEK = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

const timeInfo = reactive({
  setInterval: 0,
  dateDay: '',
  dateYear: '',
  dateWeek: ''
})

onBeforeMount(() => {

  handleTime()

})

onUnmounted(() => {

  clearInterval(timeInfo.setInterval)

})

const handleTime = () => {
  timeInfo.setInterval = setInterval(() => {
    const date = new Date()
    timeInfo.dateDay = formatTime(date, 'h:m:s')
    timeInfo.dateYear = formatTime(date, 'Y-M-D')
    timeInfo.dateWeek = WEEK[date.getDay()]
  }, 1000)
}


</script>

<style scoped>
.time {
  position: absolute;
  display: flex;
  font-size: 22px;
  min-width: 350px;
  gap: 20px;
  color: bisque;
  font-weight: 900;
  z-index: 11;
}
</style>
